<template>
  <div id="app">
      <button @click="show">点击</button>

    <div class="parent1" ref="panel">
            <div class="parent3">
                <div v-for="item in 100" :key="item">1213</div>
            </div>
        </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      panelShow: false
    }
  },
  methods: {
    show () {
      if (this.panelShow) {
        this.$refs.panel.style.height = '50px'
        this.panelShow = false
      } else {
        this.$refs.panel.style.height = '100%'
        this.panelShow = true
      }
      console.log('this.panelShow', this.panelShow)
    }
  }
}
</script>
<style>
#app {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
}
.parent1 {
      height: 50px;
      overflow: hidden;
      transition: all 1s;
  }
</style>
